<template>
  <view class="custom-tabbar">
    <view class="item-box" :class="props.page === 'homeIndex' ? 'tab-blue' : ''" @click="gotoHomeIndex">
      <view class="m-t-10rpx w-60rpx h-60rpx">
        <!-- <img v-if="props.page === 'homeIndex'" class="tab-icon" src="../../static/icon-product-click.png" alt="工作台" />
        <img v-else class="tab-icon" src="../../static/icon-product.png" alt="工作台" /> -->
        <div class="iconfont icon-home f-size" />
      </view>
      <view class="tab-title">工作台</view>
    </view>
      <view class="item-box" :class="props.page === 'orderList' ? 'tab-blue' : ''" @click="gotoOrderList">
      <view class="m-t-10rpx w-60rpx h-60rpx">
         <div class="iconfont icon-jiesuanqingdan f-size" />
      </view>
      <view class="tab-title">采购单</view>
    </view>
    <view class="item-box" :class="props.page === 'productList' ? 'tab-blue' : ''" @click="gotoProductList">
      <view class="m-t-10rpx w-60rpx h-60rpx">
         <div class="iconfont icon-chanpin f-size" />
      </view>
      <view class="tab-title">产品</view>
    </view>

    <!-- <view @click="gotoProductList">
      <view>
        <img class="tab-icon2" src="../../static/icon-发布.png" alt="发布" />
      </view>
      <view class="tab-title2">发布</view>
    </view> -->
    <view class="item-box" :class="props.page === 'mine' ? 'tab-blue' : ''" @click="gotoMine">
      <view :class="notifyNum.length?'m-l-40rpx':''" class="m-t-10rpx w-80rpx h-60rpx flex">
         <div class="iconfont icon-user f-size-blod" />
        <u-badge :isDot="notifyNum.length" type="error"></u-badge>
      </view>
      <view class="tab-title">我的</view>
    </view>
    <!-- <view class="flex flex-col items-center justify-center" @click="gotoMine">
      <view class="m-t-10rpx w-60rpx h-60rpx">
        <img v-if="props.page === 'mine'" class="tab-icon" src="../../static/icon-我的-点击.png" alt="我的-点击" />
        <img v-else class="tab-icon" src="../../static/icon-我的-未点击.png" alt="我的-未点击" />
      </view>
      <view class="tab-title">我的</view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  page: {
    type: String,
    default: '',
  }
})
import { useSupplierStore } from '@/store/index'

const supplierStore = useSupplierStore()
const notifyNum = computed(() => supplierStore.notifyNum?.allCount || 0)

function gotoHomeIndex() {
  if (props.page === 'homeIndex') return
  if (uni.getStorageSync('isNoLogin')) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return
  }
  uni.switchTab({
    url: '/pages/homePage/index'
  });
}
function gotoProductList() {
  if (props.page === 'productList') return
  if (uni.getStorageSync('isNoLogin')) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return
  }
  uni.switchTab({
    url: '/pages/index/index'
  });
}

function gotoMine() {
  if (props.page === 'mine') return
  if (uni.getStorageSync('isNoLogin')) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return
  }
  uni.switchTab({
    url: '/pages/mine/index'
  });
}
function gotoOrderList() {
  if (props.page === 'orderList') return
  if (uni.getStorageSync('isNoLogin')) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return
  }
  uni.switchTab({
    url: '/pages/orderList/index'
  });
}

function gotoCreateProduct() {
  if (props.page === 'createProduct') return
  if (uni.getStorageSync('isNoLogin')) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return
  }
  uni.navigateTo({
    url: '/pages/createProduct/index'
  });
}
</script>

<style scoped>
.bgBlue {
  background-color: #1A5FA9;
  color: #fff;
}
.tab-blue{
  color: #2563EB;
}
.f-size{
  font-size: 24px !important;
}
.f-size-blod{
  font-size: 20px !important;
  font-weight: bold;
}
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 168rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  text-align: center;
}

.item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  width: 214rpx;
  height: 104rpx;
  margin: 9rpx 0;
  padding-bottom: 8rpx;
}

.tab-icon {
  display: block;
  width: 40rpx;
  height: 44rpx;
  margin: 0 auto;
}

.tab-title {
  margin-top: 4rpx;
  font-size: 20rpx;
}

.tab-icon2 {
  display: block;
  width: 106rpx;
  height: 106rpx;
  margin-top: -54rpx;
}

.tab-title2 {
  margin-top: 4rpx;
  width: 106rpx;
  text-align: center;
}
</style>
